<template>
  <div class="bg-lime-500 w-[100vw] h-[8vh] flex flex-row justify-between">
    <div class="flex flex-row items-center">
      <img src="#" alt="logo" />
    </div>
    <div class="flex flex-row items-center">
      <el-button type="primary" plain @click.stop="toggleDarkMode" />
      <el-button type="success" plain />
      <el-switch
        v-model="value1"
        size="large"
        :active-action-icon="View"
        :inactive-action-icon="Hide"
      />
      <el-dropdown>
        <el-avatar shape="square" size="" :src="squareUrl" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
            <el-dropdown-item>Action 2</el-dropdown-item>
            <el-dropdown-item>Action 3</el-dropdown-item>
            <el-dropdown-item>Action 4</el-dropdown-item>
            <el-dropdown-item>Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from "vue";
import { Hide, View } from "@element-plus/icons-vue";
const value1 = ref(true);
const activeIndex = ref("1");
// 注入全局状态和方法
const isDarkMode = inject("isDarkMode");
const toggleDarkMode = inject("toggleDarkMode");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style></style>
